import React, { Component } from 'react';
import * as common from 'common/common.js';
import { Toast } from 'antd-mobile';
import './GoodsClassify.less';

import SeperateLine from 'common/components/SeperateLine.js';
import Bottom from 'common/containers/Bottom.js';
import Search from 'common/components/search/Search.js';

import * as goodsApi from 'common/api/GoodsApi.js';

/**
 * 分类组件
 * @param {categoryList} 		分类列表数据
 * @param {childCategoryList} 	选中分类下的列表数据
 */
class GoodsClassify extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	selectedClassifyId: "",
	    	categoryList: [],
	    	childCategoryList: []
	    }
	}
	
	componentDidMount(){
		//获取所有分类
		Toast.loading("", common.TIPS_LOADING_DURATION);
		goodsApi.classifyList({
			pid: 0
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					categoryList: result.data
				})
				//初始化分类列表
				this.refreshChildCategoryList(result.data[0].id);
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//选择分类
	categoryClick = (classifyId) => {
		this.refreshChildCategoryList(classifyId);
	}
	
	//刷新分类列表
	refreshChildCategoryList = (classifyId) => {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		goodsApi.classifyList({
			pid: classifyId,
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				this.setState({
					selectedClassifyId:classifyId,
					childCategoryList: result.data
				}, function () {
					this.childContentWindow.scrollTo(0,0);
				})
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	render(){
		const { selectedClassifyId, categoryList, childCategoryList } = this.state;
		return(
			<div className="classifyBox">
				<Search searchType="goodsName" searchKeyword=""></Search>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				
				<div className="classifyContent">
					<ul className="classifyNav">
					{
						categoryList && categoryList.length > 0 &&
						categoryList.map((item, index) => {
							var selectClass = "";
							if(item.id == selectedClassifyId){
								selectClass = "active";
							}
							return(
								<li key={index} className={selectClass} onClick={() => this.categoryClick(item.id)}>
									<span>{item.name}</span>
								</li>
							)
						})
					}
					</ul>
					<div className="content" ref={el => {this.childContentWindow = el}}>
						{
							childCategoryList && childCategoryList.length > 0 &&
							childCategoryList.map((item, index) => {
								return(
									<div className="childBox" key={index}>
										<div className="childItem">
											<h2>{item.name}</h2>
											<ul>
												{
													item.childList.map((childItem, childIndex)=>{
														return <li key={childIndex} onClick={()=>common.gotoGoodsSearch({searchType: "classify", searchKeyword:childItem.name})}>
															<div className="logo">
																<img src={childItem.logo ? childItem.logo : 'assets/img/no_pic.png'}/>
															</div>
															<span>{childItem.name}</span>
														</li>
													})
												}
											</ul>
										</div>	
									</div>
								)
							})
						}
					</div>
				</div>

				<Bottom selectedTab="classify"></Bottom>
			</div>
		)
	}
}

export default GoodsClassify;